<template>
  <div>
    <c-header :active="type" @changeType="getType"></c-header>
    <div class="title">更多-安装</div>
    <div class="check-box">
      <div class="check-item" :class="{checked:checked==0}" @click="checked=0">
        <img src="@/assets/img/more_01.png" alt style="width:2.94rem;height:0.23rem;" />
      </div>
      <div class="check-item" :class="{checked:checked==1}" @click="checked=1">
        <img src="@/assets/img/more_02.png" alt style="width:2.39rem;height:0.25rem;" />
      </div>
    </div>
    <div class="content">
      <div class="guide">
        <div class="guige-title">
          <p class="g-text1">安装指南</p>
          <p class="g-text2" @click="show = true">
            <span>视频介绍</span>
            <img src="@/assets/img/play.png" alt />
          </p>
        </div>
        <div class="guide-content">
          <p>现在Prego地板的安装比以前更快更方便。</p>
          <p>
            创新的PerfectFold
            <span class="tips">TM</span>3.0 锁扣系统提供了三种不同的安装方法。
          </p>
          <p>只需使用适合您的方法将地板锁在一起，即可完成铺设。</p>
          <p>
            在需要拆除和更换地板时，PerfectFold
            <span class="tips">TM</span>3.0系统也能轻而易举地完成。
          </p>
        </div>
      </div>
      <div class="install-method">
        <p class="method-title">安装方法</p>
        <div class="method-item">
          <div class="item-img item-img1"></div>
          <div class="item-wrap">
            <p class="wrap-text1">下压式</p>
            <p class="wrap-text2">这种方法适合进行快速大面积安装。将地板嵌入长侧接合处，然后滑动直到与前面已安装的地板对齐，然后往下按。</p>
          </div>
        </div>
        <div class="method-item">
          <div class="item-img item-img2"></div>
          <div class="item-wrap">
            <p class="wrap-text1">平插式</p>
            <p class="wrap-text2">
              与很多其他品牌不同的是，Pergo
              地板还可以进行平插式安装。对于很难甚至无法将地板倾斜的地方（在安装最后一行地板或安装门框和暖气片下面的地板时），这不失为一个方便的选择。
            </p>
          </div>
        </div>
        <div class="method-item" v-show="checked==0">
          <div class="item-img item-img3"></div>
          <div class="item-wrap">
            <p class="wrap-text1">倾角式</p>
            <p class="wrap-text2">Pergo 还根据您的喜好提供第三种新强化地板的安装方法。只需倾斜，并将两块地板较短的一边扣在一起。</p>
          </div>
        </div>
        <div class="method-item" v-show="checked==1">
          <div class="item-img item-img3"></div>
          <div class="item-wrap">
            <p class="wrap-text1">斜角式</p>
            <p class="wrap-text2">Pergo 提供了第三种安装新木地板的选择，来满足您的需求。只需将地板倾斜，然后在较短的一边将地板锁扣在一起即可。</p>
          </div>
        </div>
      </div>
      <div class="description">
        <a href>
          <p>强化复合地板安装指导说明PDF</p>
          <img src="@/assets/img/arrow.png" alt />
        </a>
        <a href>
          <p>强化复合地板-凡尔赛拼花系列安装指导说明PDF</p>
          <img src="@/assets/img/arrow.png" alt />
        </a>
      </div>
    </div>
    <!-- 弹出视频 -->
    <van-dialog v-model="show" :show-cancel-button="false" confirmButtonText="关闭">
      <iframe
        height="190"
        width="100%"
        frameborder="0"
        allowfullscreen
        src="http://player.youku.com/embed/XMTYzMzk2MDQ1Ng=="
      ></iframe>
    </van-dialog>
    <c-footer></c-footer>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      type: this.$route.query.type ? this.$route.query.type : 0,
      checked: 0,
      show: false
    };
  },
  methods: {
    getType(type) {
      this.type = type;
    }
  }
};
</script>
<style lang='less' scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 100%;
}

.check-box {
  height: 1.4rem;
  background: #fff;
  padding: 0 0.25rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .checked {
    border: 1px solid #000 !important;
    background: url("../../assets/img/active.png") no-repeat right bottom;
    background-size: 0.41rem 0.4rem;
  }

  .check-item {
    height: 0.8rem;
    width: 3.34rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e3e3e4;

    img {
      width: 2.94rem;
      height: 0.23rem;
    }
  }
}

.content {
  .guide {
    //  padding: 0 0.25rem;
    padding: 0.5rem 0.25rem 0.5rem;
    box-sizing: border-box;
    background: #f8f8f8;

    .guige-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .g-text1 {
        font-size: 0.5rem;
        font-weight: bold;
      }

      .g-text2 {
        display: flex;
        align-items: center;

        span {
          font-size: 0.3rem;
          color: #2d2d2d;
          margin-right: 0.09rem;
        }

        img {
          width: 0.27rem;
          height: 0.27rem;
          vertical-align: middle;
        }
      }
    }

    .guide-content {
      color: #6d6d6d;
      margin-top: 0.35rem;

      .tips {
        position: relative;
        top: -0.15rem;
        font-size: 0.14rem;
      }
    }
  }

  .install-method {
    background: #fff;
    padding: 0 0.25rem 0.5rem;
    box-sizing: border-box;

    .method-title {
      font-size: 0.35rem;
      font-weight: bold;
      padding: 0.55rem 0 0.4rem 0;
    }

    .method-item:not(:nth-of-type(1)) {
      margin-top: 0.5rem;
    }

    .method-item {
      display: flex;
      justify-content: space-between;

      .item-img {
        width: 3rem;
        height: 3.75rem;
        border: 1px solid #e5e5e6;
      }

      .item-img1 {
        background: url("../../assets/img/more-install_01.png") no-repeat;
        background-size: 100% 100%;
      }

      .item-img2 {
        background: url("../../assets/img/more-install_02.png") no-repeat;
        background-size: 100% 100%;
      }

      .item-img3 {
        background: url("../../assets/img/more-install_03.png") no-repeat;
        background-size: 100% 100%;
      }

      .item-wrap {
        flex: 1;
        padding-left: 0.25rem;
        padding-top: 0.15rem;
        box-sizing: border-box;

        .wrap-text1 {
          font-size: 0.32rem;
          font-weight: bold;
        }

        .wrap-text2 {
          color: #6d6d6d;
          margin-top: 0.1rem;
        }
      }
    }
  }
}

.description {
  margin-bottom: 0.9rem;
  border-bottom: 1px solid #e5e5e6;
  a {
    color: #000;
    padding: 0 0.25rem;
    height: 1.2rem;
    border-top: 1px solid #e5e5e6;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-weight: 600;
      letter-spacing: 3px;
      font-family: 宋体;
    }

    img {
      width: 0.13rem;
      height: 0.23rem;
    }
  }
}
</style>
